<template>
  <div class="role-container">

    <div class="header-box" style="display:flex;justify-content: flex-end">
      <div @click="order">
        <IconAli :sty="{width:'40px',height:'40px',margin:'-2px 0px 0px 0px'}" icon='order-1'></IconAli>
      </div>
      <div @click="add">
        <IconAli :sty="{width:'32px',height:'32px',marginRight:'32px'}" icon='add'></IconAli>
      </div>
    </div>

    <div class="table-box">
      <Table :columns="columns"
             :data="roleList"
             stripe
             border
             :highlight-row="true"
             size=large>


        <template slot-scope="{ row, index }" slot="handle">
          <div style="display: flex;justify-content: center;">
            <div @click="update(row)">
              <IconAli :sty="{width:'30px',height:'30px',marginRight:'4px'}" icon='edit'></IconAli>
            </div>
            <div @click="del(row)" v-if="row.roleId!=0">
              <IconAli :sty="{width:'30px',height:'30px',marginLeft:'4px'}" icon='sub'></IconAli>
            </div>
          </div>
        </template>

      </Table>
    </div>


    <Modal
        v-model="addFlag"
        title="新增角色"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="addOk">

      <el-form label-position="right" label-width="80px" :model="role">
        <el-form-item label="角色名称">
          <el-input clearable v-model="role.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input clearable v-model="role.roleDesc"></el-input>
        </el-form-item>
      </el-form>
    </Modal>


    <Modal
        v-model="deleteFlag"
        title="删除角色"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="deleteOk">
      <template #header>
        <IconAli :sty="{width:'40px',height:'40px'}" icon='danger' style="margin:6px 0px 0px 16px"></IconAli>
      </template>

      <div style="display:flex;flex-direction:column;margin-left: 16px">
        <div class="delTip">是否删除以下角色,此操作不可撤销,请谨慎操作!</div>
        <div class="nodeTip">{{ role.roleName }}</div>
      </div>
    </Modal>

    <Modal
        v-model="updateFlag"
        title="修改角色"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="updateOk">

      <el-form label-position="right" label-width="80px" :model="role">
        <el-form-item label="角色名称">
          <el-input clearable v-model="role.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input clearable autosize
                    show-word-limit
                    maxlength="100"
                    type="textarea"
                    v-model="role.roleDesc"></el-input>
        </el-form-item>
        <el-form-item label="菜单列表">
          <el-tree
              ref="tree"
              :data="menuList"
              show-checkbox
              node-key="id"
              empty-text="此节点为空,请联系管理员"
              :highlight-current="true"
              :default-expand-all="true"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="nodeClick">
          </el-tree>
        </el-form-item>
      </el-form>
    </Modal>


    <!--角色排序-->
    <Modal
        v-model="orderFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="orderRoleOk">

      <Order :dataList="orderRoleList" @my-event-order-list="getOrderRoleList"></Order>

    </Modal>

  </div>
</template>

<script>
import Order from "@/views/common/Order"
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "Role",
  //组件注册
  components: {IconAli, Order},
  //数据驱动
  data() {
    return {
      role: {
        roleId: "",
        roleName: "",
        roleDesc: "",
        showOrder: "",
        status: "",
        menuIds: []
      },
      columns: [
        {
          type: "index",
          title: '索引',
          resizable: true,
          width: 100,
          align: "center"
        },
        {
          title: '编号',
          key: 'roleId',
          resizable: true,
          width: 300,
          align: "center"
        },
        {
          title: '角色名称',
          key: 'roleName',
          resizable: true,
          width: 400,
          align: "center"
        },
        {
          title: '角色描述',
          key: 'roleDesc',
          resizable: true,
          align: "center"
        },
        {
          title: '操作',
          key: 'handle',
          align: "center",
          width: 140,
          slot: 'handle',
        }
      ],
      roleList: [],
      roleId: "",
      //排序
      orderFlag: false,
      orderRoleList: [],
      orderRoleIdList: [],
      //新增提示框flag
      addFlag: false,
      //删除提示框
      deleteFlag: false,
      //编辑提示框
      updateFlag: false,
      menuList: [],
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    order() {
      this.orderRoleList.length = 0
      this.orderFlag = true

      for (let i = 0; i < this.roleList.length; i++) {
        let obj = this.roleList[i];
        let tmp = {
          id: obj.roleId,
          title: obj.roleName
        }
        this.orderRoleList.push(tmp);
      }
    },
    getOrderRoleList(data) {
      this.orderRoleIdList = data.idList
    },
    //排序确定
    orderRoleOk() {
      let data = this.orderRoleIdList
      this.axios.put('/login/role/role/order', data)
          .then((data) => {
            this.selectRoleList();
            this.$Message.success('角色排序成功');
          })
    },
    //添加角色
    add() {
      this.addFlag = true;
      this.role = {
        roleId: "",
        roleName: "",
        roleDesc: "",
        showOrder: "",
        status: "",
      }
    },
    //新增确定
    addOk() {
      let data = {
        roleName: this.role.roleName,
        roleDesc: this.role.roleDesc,
      }
      this.axios.post(`/login/role/role`, data)
          .then((data) => {
            this.selectRoleList();
            this.$Message.success('角色添加成功,请及时修改相关配置');
          })
    },
    //删除
    del(row) {
      this.deleteFlag = true
      this.role = row
    },
    delRole() {
      this.axios.delete(`/login/role/role/${this.role.roleId}`)
          .then((data) => {
            this.selectRoleList(-1);
            this.$Message.success('角色删除成功!');
          })
    },
    //确定删除
    deleteOk() {
      this.delRole();
    },
    //编辑
    update(row) {
      //打开面板
      this.updateFlag = true
      //根据用户id查询详细信息,将值设入对应位置
      this.axios.get(`/login/role/role/${row.roleId}`)
          .then((data) => {
            this.role = data.data
            this.$refs.tree.setCheckedKeys(this.role.menuIds)
          })
    },
    //确定修改
    updateOk() {
      let currentCheckNode = this.$refs.tree.getCheckedNodes(false, true);
      let currentKey = [];
      for (let i of currentCheckNode) {
        currentKey.push(i.menuId)
      }

      let data = {
        roleId: this.role.roleId,
        roleName: this.role.roleName,
        roleDesc: this.role.roleDesc,
        menuIds: currentKey
      }
      this.axios.put(`/login/role/role/${this.role.roleId}`, data)
          .then((data) => {
            this.selectRoleList();
            this.$Message.success('角色添加成功');
          })
    },
    //节点被点击调用
    nodeClick(data, node, nodeComponent) {
      if (this.role.roleId == 0) {
        let allMenuIds = []
        for (let i of this.menuList) {
          allMenuIds.push(i.menuId);
        }
        this.$refs.tree.setCheckedKeys(allMenuIds)
        this.$Message.error("超级管理员的权限不可更改")
      }
    },
    selectRoleList() {
      this.axios.get(`/login/role/roles`)
          .then((data) => {
            this.roleList = data.data
          })
    },
    //数节点格式化
    converter(tmp) {
      for (let i of tmp) {
        i.id = i.menuId;
        i.label = i.menuName;
        i.children = i.menuList;
      }
      return tmp;
    },
    //请求菜单列表
    selectMenuList() {
      this.axios.get(`/login/menu/menus`)
          .then((data) => {
            let tmp = data.data;
            tmp = this.converter(tmp);
            for (let i of tmp) {
              this.converter(i.children)
            }
            this.menuList = tmp;
          })
    },
  },
  created() {
    this.selectRoleList();
    this.selectMenuList();
  },
  //钩子函数
  mounted() {
  },
}
</script>

<style lang="less" scoped>
.role-container {
  width: 96%;
  margin-top: 20px;
  margin-left: 2%;
}

.delTip {
  font-size: 20px;
  font-weight: bold;
  color: #F00;
}

.nodeTip {
  margin-top: 6px;
  font-size: 16px;
  color: #000;
  font-weight: bolder;
}
</style>